<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5;">
		<moxi-nav :set="navSet"></moxi-nav>

		<!-- 填写收货地址 -->
		<view v-if="info.send_type == 1 || info.send_type == 3">
			<orderaddress @click="click_address()" v-if="data.address" :address="data.address"
				:address_list="data.address_list"></orderaddress>
			<u-popup :show="address_show" @close="close" round="10px" :closeable="false"
				v-if="data.address_list && data.address_list.length">
				<view style="padding: 10px;height:550rpx;overflow: auto">
					<u-cell @click="info.address_id = list.id; get(); address_show = false;"
						v-for="list in data.address_list"
						:label="list.city_info[0] + ' ' + list.city_info[1] + ' ' + list.city_info[2] + ' ' + list.address"
						:title="list.name + ' ' + list.phone" value="使用" :isLink="true" titleStyle="font-size:14px;">
					</u-cell>
				</view>
				<u-button text="收货地址管理" @click="navto('page_mall/address/address')" :color="app_color"></u-button>
			</u-popup>
		</view>

		<view style="margin: 5px;" v-if="data.send_type && data.send_type.length > 1">
			<u-subsection :bgColor="app_color" :activeColor="app_color" inactiveColor="#ffffff" mode="button"
				@change="sectionChange" :list="data.send_type" v-if="data.send_type"
				:current="curSendType"></u-subsection>
		</view>

		<view v-if="data.goods" style="margin: 0 16rpx;">
			<view class="column-box" v-for="(list, key) in data.goods">
				<text class="u-line-1 goods_title">{{ list.title }}</text>
				<view class="spec_list" style="display: flex;flex-direction: row;" v-for="(spec, sk) in list.spec">
					<view style="width: 160rpx;height: 160rpx;position: relative;">
						<image :src="spec.img" mode="aspectFill"></image>
						<view @click="delGoods(list.goods_id, spec.name)" style="border: 2px #fff solid;
							;position: absolute;;left: -7px;top: -7px;background-color: #efefef;border-radius: 100%;padding: 2px;">
							<u-icon name="close" size="14"></u-icon>
						</view>
					</view>
					<view class="spec_info">
						<view style="display: flex;;flex-direction: column; gap:16rpx;">
							<text style="color: #000; font-size: 28rpx;">￥{{ spec.shop_price }} </text>
							<text class="u-line-1" style="font-size: 24rpx; color: #666">规格：{{ spec.name }}</text>
							<view style="display: flex;flex-direction: row;">
								<view style="font-size: 24rpx; color: #666;">共{{ spec.num }}件</view>
							</view>
						</view>
						<view style="font-size: 12px;color: #f56c6c">{{ spec.desc }}</view>
					</view>
				</view>
				<view style="padding: 5px;" v-if="list.desc.length">
					<view style="background-color: #fef0f0;
						padding: 10px;border-radius: 4px;font-size: 13px;color: #f56c6c;">
						<view v-for="desc in list.desc" style="font-size: 12px;margin: 3px 0">{{ desc }}</view>
					</view>
				</view>
			</view>
			<!-- 优惠卷选择 -->
			<view style="background-color: #fff; border-radius: 12rpx; margin-bottom: 24rpx;"
				v-if="data.discount && data.discount">
				<u-cell @click="discount(key, list)" v-for="(list, key) in data.discount" :title="list.title"
					:isLink="key == 'coupon' ? true : false" titleStyle="font-size:14px;">
					<text class="discount_icon" slot="icon"
						style="font-size: 24rpx; background-color: #F1454D; padding: 8rpx; border-radius: 12rpx;"
						v-if="key == 'coupon'">券</text>
					<text class="discount_icon" slot="icon" style="background-color: #ffaa7f;"
						v-else-if="key == 'manjian'">满</text>
					<text class="discount_icon" slot="icon" style="background-color: #00aa00;"
						v-if="key == 'xinren'">新</text>
					<text slot="value" v-if="key == 'coupon'" style="font-size: 14px;">{{ list.coupon_id > 0 ? list.name
						: '不使用优惠券' }}</text>
					<text slot="value" v-else-if="key == 'manjian'" style="font-size: 14px;color: #ffaa7f;">{{
						Number(list.money) > 0 ? '-' + list.money + '元' : '无优惠' }}</text>
					<text slot="value" v-else style="font-size: 13px;color: #666">{{ list.name }}</text>
				</u-cell>
			</view>

			<view class="order-info" v-if="data.all_price">
				<view class="info-item">
					<view class="title">商品金额</view>
					<div class="content">￥{{ data.all_price }}</div>
				</view>
				<view class="info-item">
					<view class="title">优惠金额</view>
					<div class="content" style="color: #F1454D;">-￥{{ data.youhui && Number(data.youhui) > 0 ?
						data.youhui : 0 }}</div>
				</view>
				<view class="info-item">
					<view class="title">运费</view>
					<div class="content" style="color: #999">{{ data.freight_price == 0 ? '免运费' : '￥' +
						data.freight_price + '元' }}</div>
				</view>
				<view class="info-item" style="flex-direction: column;align-items: normal;">
					<view class="title" style="margin-bottom: 32rpx;">备注</view>
					<view>
						<u--textarea v-model="info.buyer_desc" height="240rpx" placeholder="商品留言" :maxlength="100"
							border="none"></u--textarea>
					</view>
				</view>
			</view>
			<view class="submit">
				<view class="zhanwei"></view>
				<view class="submit-box">
					<view style="padding-left: 46rpx;">
						<view v-if="data.status">
							<text style="font-size: 14px;color: #333;">实付款：</text>
							<text :style="'margin-left: 5px;color: ' + app_color">￥{{ data.price }}</text>
						</view>
						<view v-else
							style="font-size: 14px;color: #f56c6c;display: flex;flex-direction: row;align-items: center;">
							<u-icon name="warning" :color="app_color"></u-icon> {{ data.desc }}
						</view>
					</view>
					<view>
						<view class="submit-btn"
							:style="data.status ? 'background-color: ' + app_color : 'background-color:#ccc;'"
							@click="submit()">提交订单</view>
					</view>
				</view>
			</view>
			<!-- #ifdef MP-BAIDU -->
			<view v-show="coupon_show">
				<!-- #endif -->
				<u-popup :show="coupon_show" @close="close" round="10px" :closeable="false"
					v-if="data.discount && data.discount.coupon && data.discount.coupon.coupon_list">
					<view style="padding: 10px;height:550rpx;overflow: auto">
						<u-cell @click="info.coupon_id = 0; get(); coupon_show = false;" title="不使用优惠券" :isLink="true"
							titleStyle="font-size:14px;">
							<u-icon slot="icon" name="coupon-fill" :color="info.coupon_id == 0 ? app_color : '#ccc'"
								size="40"></u-icon>
						</u-cell>
						<u-cell @click="info.coupon_id = list.id; get(); coupon_show = false;"
							v-for="list in data.discount.coupon.coupon_list" :title="list.name"
							:label="list.type == 1 ? '满' + list.use_money + '减' + list.money : '满' + list.use_money + '元 - ' + list.discount + '折'"
							:value="info.coupon_id == list.id ? '使用中' : '去使用'" :isLink="true"
							titleStyle="font-size:14px;">
							<u-icon slot="icon" name="coupon-fill"
								:color="info.coupon_id == list.id ? app_color : '#ccc'" size="40"></u-icon>
						</u-cell>
					</view>
					<u-button text="收货地址管理" @click="navto('page_mall/address/address')" :color="app_color"></u-button>
				</u-popup>
				<!-- #ifdef MP-BAIDU -->
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import orderaddress from '@/page_mall/component/order_address.vue';
export default {
	components: { orderaddress },//2.注册组件
	data() {
		return {
			data: {},
			coupon_show: false,
			address_show: false,
			curSendType: 0,
			info: {
				order_id: 0,
				address_id: 0,
				coupon_id: 0,
				send_type: 0
			},
			delInfo: {
				goods_id: "",
				spec_name: ""
			}
		}
	}, onLoad() {
		this.info.order_id = this.param.order_id;
		this.get()
	},
	methods: {
		delGoods(goods_id, spec_name) {
			this.delInfo.goods_id = goods_id;
			this.delInfo.spec_name = spec_name;
			this.isBox('是否删除', (res) => {
				this.moxiPost(
					'/plugin/mall/user/order/del_spec',
					{
						order_id: this.info.order_id,
						goods_id: this.delInfo.goods_id,
						spec_name: this.delInfo.spec_name
					}, function () {
						self.get()
					})
			}, '删除将无法撤销，请谨慎操作!')
		},
		spec_num(goods_id, sk, e) {
			let self = this;
			this.moxiPost('/plugin/mall/user/order/spec_num',
				{
					order_id: this.info.order_id,
					goods_id: goods_id,
					spec_name: sk,
					spec_num: e.value
				}, function () {
					self.get()
				})
		},
		submit() {
			if (!this.data.status) {
				this.msg('订单错误，请修改再试!')
			} else {
				if (this.param.is_cart) {
					this.info.is_cart = 1;
				} else {
					this.info.is_cart = 0;
				}
				let self = this;
				this.moxiPost('/plugin/mall/user/order/submit_order', this.info, function (data) {
					const url = 'pages/index/pay?pay_id=' + data.data + '&btn_name=查看订单&path=' + encodeURIComponent('page_mall/order/order')
					self.navto(url, true)
				})
			}
		},
		close() {
			this.address_show = false;
			this.coupon_show = false;
		},
		get() {
			let self = this;

			this.moxiPost('/plugin/mall/user/order/order_info', this.info, function (data) {
				self.data = data.data;
				if (data.result > 1) {
					setTimeout(function () {
						uni.navigateBack()
					}, 1500)
					return false;
				}
				if (self.info.send_type === 0) {
					self.info.send_type = data.data.send_type[0].value;
				}

				console.log(data.data);
			})
		},
		click_address(e) {
			if (this.data.address_list && this.data.address_list.length) {
				this.address_show = true;
			} else {
				this.navto('pages/page_mall/address/address')
			}

		},
		discount(key, list) {
			if (key == 'coupon') {
				this.coupon_show = true;
			}
		},
		sectionChange(e) {
			this.curSendType = e;
			this.info.send_type = this.data.send_type[e].value;
			this.get()
		}
	}
}
</script>

<style lang="scss" scoped>
.goods_title {
	font-size: 14px;
	color: #333;
	margin-bottom: 8px;
}

.spec_list {
	border-top: 1px #eee dashed;
	padding: 12px 0;

	&:last-of-type {
		padding-bottom: 0;
	}
}

.spec_list:first-child {
	border-style: solid;
}

.spec_list image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx;
}

.spec_info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	margin-left: 16rpx;
	position: relative;
}

.spec_info text {
	margin-right: 16rpx;
}

.column-box {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	margin-bottom: 24rpx;
	padding: 32rpx;
}

.order-info {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	padding: 36rpx 32rpx;
	gap: 32rpx;

	.info-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		font-size: 28rpx;
		color: #000;

		::v-deep .u-textarea {
			padding: 8rpx;
			background-color: #F5F5F5;
			border-radius: 12rpx;

			.u-textarea__field {
				background-color: #f5f5f5;
			}
		}
	}
}

.submit .zhanwei {
	width: 100%;
	height: 60px;
}

.discount_icon {
	padding: 2px;
	background-color: #ff557f;
	color: #fff;
	font-size: 12px;
	line-height: 12px
}

.submit-box {
	width: 100%;
	height: 60px;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-radius: 12rpx 12rpx 0 0;
	overflow: hidden;
}

.submit-btn {
	color: #fff;
	font-size: 14px;
	padding: 16rpx 48rpx;
	border-radius: 999px;
	margin-right: 16rpx;
}
</style>